<template>
  <view class="page group-invite">
    <!-- <nav-bar :btn="false" back>
      <text>邀请好友</text>
    </nav-bar> -->
    <view class="nav-bar">
      <view class="back-box" @click="handleBack">
        <uni-icons type="back" :size="24"></uni-icons>
      </view>
      <view class="nav-search">
        <uni-search-bar v-model="searchText" radius="100" cancelButton="none" placeholder="输入好友昵称搜索"></uni-search-bar>
      </view>
    </view>
    <view class="friend-items">
      <scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
        <view v-for="friend in friendItems" v-show="!searchText || friend.nickName.includes(searchText)" :key="friend.id">
          <view class="friend-item" @click="onSwitchChecked(friend)" :class="{ checked: friend.checked, disabled: friend.disabled }">
            <image class="ck-icon" src="@/static/image/check_dis.png" mode="widthFix" v-if="friend.disabled"></image>
            <image class="ck-icon" src="@/static/image/check_y.png" mode="widthFix" v-else-if="friend.checked"></image>
            <image class="ck-icon" src="@/static/image/check_n.png" mode="widthFix" v-else></image>
            <head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage"></head-image>
            <view class="friend-name">{{ friend.nickName }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
    <button class="bottom-btn" type="primary" :disabled="inviteSize == 0" @click="onInviteFriends()">邀请({{
        inviteSize
      }})
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      groupId: null,
      searchText: "",
      groupMembers: [],
      friendItems: [],
      groupAgentAreaId: null, // 是否是
    }
  },
  methods: {
    onInviteFriends() {
      let inviteVo = {
        groupId: this.groupId,
        friendIds: []
      }
      this.friendItems.forEach((f) => {
        if (f.checked && !f.disabled) {
          inviteVo.friendIds.push(f.id);
        }
      })
      if (inviteVo.friendIds.length > 0) {
        this.$http({
          url: "/group/invite",
          method: 'POST',
          data: inviteVo
        }).then(() => {
          uni.showToast({
            title: "邀请成功",
            icon: 'none'
          })
          setTimeout(() => {
            // 回退并刷新
            let pages = getCurrentPages();
            let prevPage = pages[pages.length - 2];
            prevPage.$vm.loadGroupMembers();
            uni.navigateBack();
          }, 1000);

        })
      }
    },
    onShowUserInfo(userId) {
      uni.navigateTo({
        url: "/pages/common/user-info?id=" + userId
      })
    },
    onSwitchChecked(friend) {
      if (!friend.disabled) {
        friend.checked = !friend.checked;
      }
    },
    initFriendItems() {
      this.friendItems = [];
      let friends = this.friendStore.friends;
      friends.forEach((f => {
        let item = {
          id: f.id,
          headImage: f.headImage,
          nickName: f.nickName,
          online: f.online
        }
        item.disabled = this.isGroupMember(f.id);
        item.checked = item.disabled;
        this.friendItems.push(item);
      }))
    },
    loadGroupMembers(id) {
      this.$http({
        url: `/group/members/${id}`,
        method: "GET"
      }).then((members) => {
        let memberList = members || [];
        this.groupMembers = memberList.filter(m => !m.quit);
        if (this.groupAgentAreaId) {
          this.getAgentMemberList();
        } else {
          this.initFriendItems();
        }
      })
    },
    isGroupMember(id) {
      return this.groupMembers.some(m => m.userId == id);
    },
    handleBack() {
      uni.navigateBack();
    },
    getAgentMemberList() {
      this.$http({
        url: `/app/im/member/findAgentPage`,
        method: "POST",
        data: {
          agentAreaId: this.groupAgentAreaId,
          pageNumber: 1,
          pageSize: 10000
        }
      }).then((data) => {
        const friendList = data.records || [];
        friendList.forEach((f => {
          let item = {
            id: f.userId,
            headImage: f.headImage,
            nickName: f.remarkNickName,
            online: f.online,
            quit: f.quit
          }
          item.disabled = this.isGroupMember(f.id);
          item.checked = item.disabled;
          this.friendItems.push(item);
        }))
      })
    }
  },
  computed: {
    inviteSize() {
      return this.friendItems.filter(f => !f.disabled && f.checked).length;
    }
  },
  onLoad(options) {
    this.groupId = options.id;
    this.loadGroupMembers(options.id);
    this.groupAgentAreaId = null;
    if (options.type == 1 && options.agentAreaId) {
      this.groupAgentAreaId = options.agentAreaId
    }

  }
}
</script>

<style lang="scss" scoped>
.page {
  top: 0;
}

.nav-bar {
  padding: 10rpx 0;
}

.group-invite {
  position: relative;
  display: flex;
  flex-direction: column;

  .friend-items {
    position: relative;
    flex: 1;
    overflow: hidden;

    .friend-item {
      height: 120rpx;
      display: flex;
      position: relative;
      padding: 0 30rpx;
      align-items: center;
      background-color: white;
      white-space: nowrap;
      border-bottom: 1px solid #f0f0f0;

      &.disabled {
        color: #999 !important;
      }

      // &.checked {
      // 	background-color: $im-color-primary-light-9;
      // }
      .ck-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 30rpx;
      }

      .friend-name {
        flex: 1;
        padding-left: 20rpx;
        font-size: 30rpx;
        font-weight: 600;
        line-height: 60rpx;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .scroll-bar {
      height: 100%;
    }
  }
}
</style>